<!DOCTYPE html>
<html lang="en" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <link rel="stylesheet" href="/css/custom.form.css">
    <style>
        th {
            text-align: center
        }
        .table_margin{
            padding-left: 10px;
            padding-right: 10px;
        }

        body .demo-class .layui-layer-title{
            background:#5FB878; color:#fff; border: none;
        }
    </style>
</head>
<body>


<!--成绩列表-->
<fieldset class="layui-elem-field">
    <legend style="text-align: center"><b>年级成绩信息列表</b></legend>
    <div class="layui-field-box">
        <div class="table_margin">
            <table class="layui-table">
                <thead>
                <tr>
                    <th width="10%" rowspan="2">科目</th>
                    <th width="10%" rowspan="2">总分</th>
                    <th width="10%" colspan="6" style="text-align: center">得分率范围人数</th>
                    <th width="10%" rowspan="2">平均分</th>
                </tr>
                <tr>
                    <th width="10%" >100%-90%</th>
                    <th width="10%">90%-80%</th>
                    <th width="10%">80%-70%</th>
                    <th width="10%">70%-60%</th>
                    <th width="10%">60%-30%</th>
                    <th width="10%">30%-0%</th>
                </tr>
                </thead>
                <tbody>
                <tr th:each="bean: ${data.list}">
                    <td th:text="${bean.courseName}"></td>
                    <td th:text="${bean.totalScore}"></td>
                    <td th:text="${bean.ninety}"></td>
                    <td th:text="${bean.eighty}"></td>
                    <td th:text="${bean.seventy}"></td>
                    <td th:text="${bean.sixty}"></td>
                    <td th:text="${bean.thirty}"></td>
                    <td th:text="${bean.zero}"></td>
                    <td th:text="${bean.avg}"></td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</fieldset>


<!--成绩列表-->
<fieldset class="layui-elem-field">
    <legend style="text-align: center"><b>班级成绩信息列表</b></legend>
    <div class="layui-field-box">
        <div class="table_margin">
            <table class="layui-table">
                <thead>
                <tr>
                    <th width="10%" rowspan="2">班级</th>
                    <th width="10%" rowspan="2">学科</th>
                    <th width="10%" rowspan="2">总分</th>
                    <th width="10%" colspan="6" style="text-align: center">得分率范围人数</th>
                    <th width="10%" rowspan="2">平均分</th>
                </tr>
                <tr>
                    <th width="10%" >100%-90%</th>
                    <th width="10%">90%-80%</th>
                    <th width="10%">80%-70%</th>
                    <th width="10%">70%-60%</th>
                    <th width="10%">60%-30%</th>
                    <th width="10%">30%-0%</th>
                </tr>
                </thead>
                <tbody>
                <tr th:each="bean: ${data.classList}">
                    <td th:text="${bean.className}"></td>
                    <td th:text="${bean.courseName}"></td>
                    <td th:text="${bean.totalScore}"></td>
                    <td th:text="${bean.ninety}"></td>
                    <td th:text="${bean.eighty}"></td>
                    <td th:text="${bean.seventy}"></td>
                    <td th:text="${bean.sixty}"></td>
                    <td th:text="${bean.thirty}"></td>
                    <td th:text="${bean.zero}"></td>
                    <td th:text="${bean.avg}"></td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</fieldset>


<fieldset class="layui-elem-field layui-field-title">
    <legend style="text-align: center"><b>成绩分布图</b></legend>
    <div class="layui-field-box">
        <div class="layui-col-sm12 layui-col-md6 layui-col-lg6">
            <div id="scoreBar" style="width: 100%;height: 500px;"> </div>
        </div>
        <div class="layui-col-sm12 layui-col-md6 layui-col-lg6">
            <div id="scoreCircular" style="width: 100%;height: 500px;"> </div>
        </div>
    </div>
</fieldset>


</body>
</html>
<script src="/layui/layui.all.js"></script>
<script src="/js/core.util.js"></script>
<script src="/js/echarts.min.js"></script>
<script type="text/javascript" >

    //获取token
    var token = CoreUtil.getData("access_token");
    //地址栏转义token中的#号
    var tokenQuery = token.replace("#", "%23");
    var tableIns1;
    var table = layui.table;
    var form = layui.form;
    var layer = layui.layer;
    var $ = jQuery = layui.jquery;
    var laydate = layui.laydate;
	
	
	var lineObject = "[[${data.lineObject}]]".replace(/&quot;/g,"\"");
    var barObject = "[[${data.barObject}]]".replace(/&quot;/g,"\"");
	
    lineObject = JSON.parse(lineObject);
    barObject = JSON.parse(barObject);
    layui.use(['table', 'layer', 'laydate'], function () {
        var scoreCircular = echarts.init(document.getElementById('scoreCircular'));
        var scoreBar = echarts.init(document.getElementById('scoreBar'));
        var lineOptions = {
           title: {
                text: "班级课程成绩分布图",
				x: 'center'
            },
            legend: {
				right: 'right',
                orient: 'vertical', //类型垂直,默认水平
                data: lineObject.legend
            },
            xAxis: {
                data: ['0-30','30-60','60-70','70-80','80-90','90-100'],
				name: "得分率"
            },
            yAxis: {
                type: "value",
				name: "人数"
            },
            series: lineObject.series,

            tooltip : {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                }
            }
        };
        scoreBar.setOption(lineOptions, true);

        var barOptions = {
			title: {
                text: "年级课程成绩分布图",
				x: 'center'
            },
			legend: {
				right: 'right',
                orient: 'vertical', //类型垂直,默认水平
                data: barObject.legend
            },
            xAxis: {
                data: ['0-30','30-60','60-70','70-80','80-90','90-100'],
				name: "得分率"
            },
            yAxis: {
                type: "value",
				name: "人数"
            },
            series: barObject.series,

            tooltip : {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                }
            }
        };
        scoreCircular.setOption(barOptions, true);

    });


</script>